
import React, { Component } from 'react'
import { connect } from 'react-redux'
import _ from 'lodash'
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
import { Button, } from 'antd'
import { withRouter } from "react-router-dom";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import BilinIcon from "@common/presentational/BilinIcon";
import {
    getWarehouseList,
    getWarehouseInfo
} from "@sagas/warehouse/warehouseManagement";

function mapStateToProps(state) {
    const { warehouseManagement } = state
    return {
        warehouseList: warehouseManagement.warehouseList,
    }
}

@connect(
    mapStateToProps
    , {
        getWarehouseList,
        getWarehouseInfo
    })
@withRouter
class WarehouseManage extends Component {

    constructor(props) {
        super(props)

        this.tableRef = React.createRef()
        this.getTableInfo = this.getTableInfo.bind(this)
        this.goModify = this.goModify.bind(this)
        this.goSettingExpress = this.goSettingExpress.bind(this)

        this.showFormModal = this.showFormModal.bind(this)
    }

    getTableInfo({ current, pageSize }) {
        this.props.getWarehouseList({
            pageNo: current,
            pageSize,
        }, () => {
            console.log('call back')
        })
        this.setUrlQuery(current, pageSize)
    }

    setUrlQuery(current, pageSize) {
        const { history } = this.props
        let params = {
            current, pageSize
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    showFormModal() {
        this.props.history.push(`/warehouse/create`)
    }

    goModify(e){
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        const { id } = e.currentTarget.dataset
        this.props.getWarehouseInfo({
            id: id
        }, (res) => {
            history.push({
                pathname: `/warehouse/edit/${id}`,
                state: {
                    ...res
                }
            })
        })
    }

    goSettingExpress = (e) => {
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        const { id } = e.currentTarget.dataset
        this.props.getWarehouseInfo({
            id: id
        }, (res) => {
            history.push({
                pathname: `/warehouse/setting/${id}`,
                state: {
                    ...res
                }
            })
        })
    }

    getTableParams = () => {
        const { warehouseList } = this.props
        const columns = [{
            title: '仓库名称',
            dataIndex: 'name',
            key: 'name',
            render: (text, record) =>
                <div>
                    {text} <span className='store-type mgl-12 clr-orange ft-12'>{record.store_id ? '店铺仓' : '总部仓'}</span>
                </div>
        }, {
            title: '仓库地址',
            dataIndex: 'address',
            key: 'address',
        }, {
            title: '联系人',
            dataIndex: 'contact',
            key: 'contact',
            render: (text, record) =>
                <div>
                    {text}&nbsp;{record.mobile}
                </div>
        }, {
            title: '供货方式',
            dataIndex: 'supply',
            key: 'supply',
            render: (text, record) => {
                const renderText = []
                renderText.push(record.pick_up ? '自提' : '')
                renderText.push(record.city_express ? '同城配送' : '')
                renderText.push(record.ordinary_express ? '普通快递' : '')
                return renderText.filter(i => i && i.trim()).join('、')
            }
        }, {
            title: '操作',
            key: 'operation',
            width: '15%',
            render: (text, record) =>
                <div className="flex-vertical-center">
                    <div data-id={record.id} onClick={this.goModify} className="mgr-8 ft-hover">编辑</div>
                    {
                        record.ordinary_express || record.city_express ?
                            <div data-id={record.id} onClick={this.goSettingExpress} className="mgr-8 ft-hover">设置</div>
                            : null
                    }
                </div>
        }];
        const tableData = (warehouseList.warehouses || []).map((warehouse, index) => ({
            ...warehouse,
            key: `warehouse_${index}`,
        }))
        return {
            columns,
            tableData,
            total: warehouseList.total
        }
    }

    render() {
        const { columns, tableData, total } = this.getTableParams()
        return (
            <div className="table-scroll-container">
                <div className="table-params page-params flex-vertical-center mgb-16">
                    <Button type="primary" className="button-small" onClick={this.showFormModal}><BilinIcon type="plus" className="ft-18 mgr-8"/>新建仓库</Button>
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="warehouseList" onChange={this.getTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={columns}
                            dataSource={tableData || []}
                            pagination
                        />
                    </div>
                    <div className="table-pagination">
                        <CustomizeTablePagination
                            total={total}
                        />
                    </div>
                </CustomizeTableProvide>
            </div>
        )
    }
}

export default WarehouseManage